
<template>
  <div class="list">
    <!-- <div style="width: 100%;height: 46px;"></div> -->
    <van-divider>推荐景点</van-divider>
    <div class="list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦">
        <div class="commodity" @click="commodity">
          <div class="commodity-img">
            <img src="http://192.168.1.133:803/upload/first/1/7a000d5e-6c2d-433d-ad20-5c15a7b6c65b_200_150.jpg">
          </div>
          <div class="commodity-details">
            <div class="details-teile">
              <span style="color: rgb(40, 40, 40);">王士禛纪念馆</span>&#8194;
              <span style="color: #67bfa7;">11分</span>
            </div>
            <div style="display: flex;">
              <div style="margin-left: 5px;">
                <van-tag size="20px" plain color="#67bfa7" style="border: 1px solid;">博物馆</van-tag>
              </div>
            </div>
            <div class="deleted-content">
              <p>王士禛纪念馆分忠勤报国、石刻瑰宝、齐鲁望族三个专题，展示新城王氏家族的...</p>
            </div>
            <div class="deleted-km">
              <p>距您**KM</p>
              <div style="width: 40%;text-align: center;">
                <span style="font-size: 20px; color: #67bfa7;">￥7</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>

      </van-list>

    </div>
    <!-- <v-min></v-min> -->
  </div>
</template>

<script>
  // import city from '@/assets/js/city.js'
  // import AMap from "AMap"
  // import min from '@/views/Min.vue'
  export default {
    components: {
      // "v-min": min,
    },
    // watch: {
    //   ass: function(val) {
    //     console.log(val)
    //   }
    // },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        //头部

      }
    },
    methods: {

      //点击跳转
      clickleft(){
        this.$router.go(-1);
      }


    },
    mounted() {

      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      //console.log(this.partInfo);
    },

  }
</script>
<style lang="scss">
  .list {
    background: white;

    .search {
      width: 80%;
      margin: 0 auto;
      display: flex;
      background: white;
      height: 40px;
      border: 1px solid #00CBA6;

      .search_cs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
      }

      .search_in {
        display: flex;
        align-items: center;
        width: 60%;

        input {
          border: none;
          border-left: 1px solid #999999;
          border-radius: 0 !important;
        }
      }

    }

    .current {
      display: flex;
      padding: 0.625rem 1rem;
      line-height: 2rem;
      font-size: 1.125rem;
      background: #FFFFFF;
      justify-content: space-between;
      color: #999999;

      .current_box {
        width: 50%;
        display: flex;
        justify-content: space-around;

      }
    }

    .popular {
      .popular_p {
        padding: 10px 16px;
        background: #f5f5f5;
        font-size: 1.1rem;
      }

      .popular_cs {
        width: 80px;
        height: 30px;
        margin: 0.625rem 0.625rem;
        border-radius: 1.875rem;
        border: 1px solid #e4e4e4;
        display: flex;
        font-size: 1rem;
        align-items: center;
        justify-content: center;
      }
    }

    .van-index-bar {
      color: #999999 !important;

      .van-index-anchor {
        background: #f5f5f5;
        color: #999999 !important;
        font-weight: 600;
      }

      .van-cell {
        color: #999999 !important;
      }
    }

    .van-popup {

      // top: 0;
      // transform:translate3d(0,0%,0) !important;
      .van-nav-bar {
        .van-nav-bar__left {
          .van-icon {
            font-size: 22px;
            color: #46d0ca !important;
          }
        }
      }
    }

    .sort {
      position: fixed;
      position: fixed;
      width: 100%;
      top: 50px;
      z-index: 999;
      .filter {
        width: 100%;
        height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .filter_neo {
          display: flex;
          flex-direction: column;
          width: 80%;
          height: 40%;

          .van-checkbox-group {
            display: flex;
          }
        }

        .filter_two {
          display: flex;
          flex-direction: column;
          width: 80%;

          // height: 50%;
          .van-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
              // width: 33%;
              margin-top: 0.3125rem;
            }
          }
        }
      }
    }

    .list {
      .van-list {
        .commodity {
          position: relative;
          display: flex;
          width: 100%;
          height: 11.375rem;
          /* background: #000000; */
          justify-content: center;
          align-items: center;
          border-bottom: 0.0625rem solid #f2f2f2;

          .commodity-img {
            display: flex;
            width: 40%;
            height: 80%;
            /* align-items: center; */
            /*垂直居中*/
            justify-content: center;

            /*水平居中*/
            img {
              display: flex;
              width: 90%;
              height: 90%;
              border-radius: 0.625rem;
            }
          }

          .commodity-details {
            width: 100%;

            /* display: flex; */
            /* justify-content: center; */
            /* align-items: center; */
            .details-teile {
              height: 1.875rem;
              line-height: 1.875rem;
              font-size: 16px;
            }

            .deleted-content {
              width: 95%;
              margin-top: 0.3125rem;
              font-size: 0.8125rem;
              color: #909090;
            }

            .deleted-km {
              display: flex;
              justify-content: space-between;
              margin-top: 0.625rem;
              font-size: 0.875rem;
              color: #909090;
            }
          }
        }
      }
    }
  }
</style>
